<%--
  Created by IntelliJ IDEA.
  User: l
  Date: 2019/12/31
  Time: 3:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/cont.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js" media="all" ></script>
    <style type="text/css">
        .carousel-inner{
            text-align: center;

            width:100%;
            height: 400px;
        }
        .carousel-inner1{
            text-align: center;

            width:100%;
            height: 300px;
        }
        .dd{
            text-align: center;
            color: #367BA7;
            font-family: "微软雅黑";
            margin-top: 30px;
            line-height: 30px;

        }
        .dd2{
            width: 80%;
            height: 500px;
            margin: auto;
            border: 1px red solid;
        }

        .pltx{
            border-radius: 50%;
        }

    </style>
</head>
<body>
<div>
    <ul class="layui-nav" lay-filter="demo">
        <li class="layui-nav-item" style="margin-left: 60px;"><a href="index.html"> <img src="${pageContext.request.contextPath}/img/logo.png"style="height: 60px;width: 150px;margin-left: 30px;"/></a></li>
        <li class="layui-nav-item" style="float: right;">
            <a href="${pageContext.request.contextPath}/userLogin"  style="color: deepskyblue;font-size: 20px;font-family: '微软雅黑';">
                <img src="${pageContext.request.contextPath}//t.cn/RCzsdCq" class="layui-nav-img">用户登陆</a>
            <dl class="layui-nav-child">
                <dd><a href="#"  style="color: deepskyblue;font-size: 15px;font-family: '微软雅黑';">修改信息</a></dd>
                <dd><a href="#"  style="color: deepskyblue;font-size: 15px;font-family: '微软雅黑';">安全管理</a></dd>
                <dd><a href="#"  style="color: deepskyblue;font-size: 15px;font-family: '微软雅黑';">退了</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item" style="float: right;">
            <a href="#"  style="color: deepskyblue;font-size: 20px;font-family: '微软雅黑';">个人中心<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item" style="float: right;">
            <a href="${pageContext.request.contextPath}/login"  style="color: deepskyblue;font-size: 20px;font-family: '微软雅黑';">控制台<span class="layui-badge">9</span></a>
        </li>
    </ul>
</div>

<div style="width: 100%; height: 50px;float:left; background-color: ghostwhite; ">
    <div class="container">
        <div class="row"  style="margin-top:15px;font-size: 17px;">
            <div class="col-lg-1"></div>
            <div class="col-lg-2"><a href="${pageContext.request.contextPath}index">首页</a></div>
            <div class="col-lg-2"><a href="${pageContext.request.contextPath}/userSingerLogin">歌手</a></div>
            <div class="col-lg-2"><a href="${pageContext.request.contextPath}/userMV">MV</a></div>
            <div class="col-lg-2"><a href="${pageContext.request.contextPath}/songTypeLogin">歌曲分类</a></div>
            <div class="col-lg-2"><a href="${pageContext.request.contextPath}/ticketLogin">票务</a></div>
            <div class="col-lg-1"></div>
        </div>
    </div>
</div>
<div class="container-fluid" style="text-align: center;background-color:#F2F2F2 ;">
    <div class="row">
        <div class="col-lg-1"></div>
        <div class="col-lg-7">
            <video width="1000px" autoplay="autoplay" controls="controls">
                <source src="http://sr.sycdn.kuwo.cn/8f5630234d731beadc92b564e838b29d/5e0a5e69/resource/m1/47/96/2020808793.mp4" type="video/mp4"></source>
            </video>
        </div>
        <div class="col-lg-4">
            <p style="line-height: 40px;text-align: center;"><img src="${pageContext.request.contextPath}/img/精彩推荐.png" width="100px"></p>
            <div class="row">
                <div class="col-lg-6">
                    <a href="#"><img src="${pageContext.request.contextPath}/img/MV1.jpg" width="240px" /></a>
                    <a href="#"><p style="line-height: 40px;color: dimgrey ;font-size: 15px;font-family: '微软雅黑';">七子之歌</p></a>
                </div>
                <div class="col-lg-6">
                    <a href="#"><img src="${pageContext.request.contextPath}/img/MV4.jpg" width="240px" /></a>
                    <a href="#"><p style="line-height: 40px;color: dimgrey ;font-size: 15px;font-family: '微软雅黑';">看见夕阳了吗？</p></a>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <a href="#"><img src="${pageContext.request.contextPath}/img/MV10.jpg" width="240px" /></a>
                    <a href="#"><p style="line-height: 40px;color: dimgrey ;font-size: 15px;font-family: '微软雅黑';">CHEN</p></a>
                </div>
                <div class="col-lg-6">
                    <a href="#"><img src="${pageContext.request.contextPath}/img/MV3.jpg" width="240px" /></a>
                    <a href="#"><p style="line-height: 40px;color: dimgrey ;font-size: 15px;font-family: '微软雅黑';">All I Want for Christmas Is You</p></a>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <a href="#"><img src="${pageContext.request.contextPath}/img/MV2.jpg" width="240px" /></a>
                    <a href="#"><p style="line-height: 40px;color: dimgrey ;font-size: 15px;font-family: '微软雅黑';">寂寞的时候</p></a>
                </div>
                <div class="col-lg-6">
                    <a href="#"><img src="${pageContext.request.contextPath}/img/MV6.jpg" width="240px" /></a>
                    <a href="#"><p style="line-height: 40px;color: dimgrey ;font-size: 15px;font-family: '微软雅黑';">献丑</p></a>
                </div>
            </div>
        </div>
    </div>
</div>

<!--
    作者：offline
    时间：2019-12-23
    描述：简介
-->

<div >
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-1"></div>
            <div class="col-lg-9" style="margin-left:40px ;">
                <div class="row">
                    <div class="col-lg-5">
                        <div style="font-size: 25px;color: #000000;">我不需要男朋友</div>
                    </div>

                    <div class="col-lg-7">
                        <div style="font-family: '微软雅黑';color: gray; font-size: 15px;margin-top: 10px;">分享到：
                            <a href="#"><img src="${pageContext.request.contextPath}/img/qzone.png"width="40px"></a>
                            <a href="#"><img src="${pageContext.request.contextPath}/img/weibio.png" width="50px" /></a>
                            <a href="#"><img src="${pageContext.request.contextPath}/img/weixin.jpg"width="40px"></a>
                            <a href="#"><img src="${pageContext.request.contextPath}/img/qq.png" width="40px" /></a>
                            <a href="#"><img src="${pageContext.request.contextPath}/img/ins.png"width="40px"></a>
                        </div>
                    </div>
                </div>


                <p style="font-size: 15px;color: gray;">陈梓童<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>播放量：12.3W</p>
            </div>
        </div>
    </div>

</div>
<!--
    作者：offline
    时间：2019-12-24
    描述：评论输入
-->
<div >
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2" style="text-align: right;margin-left: 10px">
                <p style="line-height: 10px;">&nbsp;</p>
                <span style="font-size: 20px;">写下评论：</span>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="row">
                <div class="col-lg-8" style="padding-left: 70px;">
                    <textarea cols="140" rows="7"></textarea>
                </div>
            </div>

        </div>
    </div>
    <div style="position:relative;left: 1145px;">
        <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal">发表评论</button>
    </div>
</div>

<!--
    作者：offline
    时间：2019-12-24
    描述：评论列表
-->
<div>
    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-2" style="padding-left: 57px;font-size: 20px;">
                热门评论(5)
                <hr style="color: grey;width: 1000px;" />
            </div>

        </div>
        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-1" style="padding: 10px;text-align: right;">
                <a href="#"><img src="${pageContext.request.contextPath}/img/评论头像1.png" class="pltx"></a>
            </div>
            <div class="col-lg-5" style="padding: 0;">
                <p style="font-family:'微软雅黑' ;color: darkgrey;font-size: 15px;"><a href="#">重生之我是CJY</a></p>
                <p style="font-family:'微软雅黑' ;color: black;font-size: 15px;">在我们每个人的记忆中 总会有一个人挥之不去 他可能真的不可能在无时无刻给你足够的关怀备至 但是在我们眼里 他的责备，诉说，教育 当我们长大了以后 那真的是一种享受与怀念</p>
                <p style="font-family:'微软雅黑' ;color: darkgrey;font-size: 15px;">12月15日&nbsp;15:45</p>

            </div>


        </div>

        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-2" style="padding-left:58px ;">
                <hr style="color: grey;width: 1000px;" />
            </div>
        </div>


        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-1" style="padding: 10px;text-align: right;">

                <a href="#"><img src="${pageContext.request.contextPath}/img/评论头像2.png" class="pltx"></a>
            </div>
            <div class="col-lg-5" style="padding: 0;">
                <p style="font-family:'微软雅黑' ;color: darkgrey;font-size: 15px;"><a href="#">飞鹰侠破风刺</a></p>
                <p style="font-family:'微软雅黑' ;color: black;font-size: 15px;">九龙塘 铜锣湾尖沙咀 浅水湾 边个睇晒 我睇晒</p>
                <p style="font-family:'微软雅黑' ;color: darkgrey;font-size: 15px;">12月12日&nbsp;17:15</p>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-2" style="padding-left:58px ;">
                <hr style="color: grey;width: 1000px;" />
            </div>
        </div>


        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-1" style="padding: 10px;text-align: right;">
                <a href="#"><img src="${pageContext.request.contextPath}/img/评论头像3.png" class="pltx"></a>
            </div>
            <div class="col-lg-5" style="padding: 0;">
                <p style="font-family:'微软雅黑' ;color: darkgrey;font-size: 15px;"><a href="#">枫哥</a></p>
                <p style="font-family:'微软雅黑' ;color: black;font-size: 15px;">坤坤最帅</p>
                <p style="font-family:'微软雅黑' ;color: darkgrey;font-size: 15px;">10月18日&nbsp;05:25</p>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-2"style="padding-left:58px ;">
                <hr style="color: grey;width: 1000px;" />
            </div>
        </div>


        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-1" style="padding: 10px;text-align: right;">
                <a href="#"><img src="${pageContext.request.contextPath}/img/评论头像4.png" class="pltx"></a>
            </div>
            <div class="col-lg-5" style="padding: 0;">
                <p style="font-family:'微软雅黑' ;color: darkgrey;font-size: 15px;"><a href="#">胖子</a></p>
                <p style="font-family:'微软雅黑' ;color: black;font-size: 15px;">蔡徐坤我老公</p>
                <p style="font-family:'微软雅黑' ;color: darkgrey;font-size: 15px;">12月10日&nbsp;10:40</p>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-2"style="padding-left:58px ;">
                <hr style="color: grey;width: 1000px;" />
            </div>
        </div>


        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-1" style="padding: 10px;text-align: right;">
                <a href="#"><img src="${pageContext.request.contextPath}/img/评论头像5.png" class="pltx"></a>
            </div>
            <div class="col-lg-5" style="padding: 0;">
                <p style="font-family:'微软雅黑' ;color: darkgrey;font-size: 15px;"><a href="#">蒋委员长</a></p>
                <p style="font-family:'微软雅黑' ;color: black;font-size: 15px;">反清复明指日可待</p>
                <p style="font-family:'微软雅黑' ;color: darkgrey;font-size: 15px;">11月11日&nbsp;11:11</p>
            </div>

        </div>
    </div>
</div>







<!--
	作者：offline
	时间：2019-12-23
	描述：脚部
-->
</div>
<p style="line-height: 20px;">&nbsp;</p>
<div style="background-color: #333333;height: 370px;width: 100%;">
    <div class="container">
        <div class="row" >

            <div class="col-lg-7"  style="line-height: 50px;font-size: 15px;padding: 30px;">
                <p style="color:#999999;">下载音律客户端</p>
                <p>
                    <a href="#"><span class="fa fa-windows" style="font-size:48px;color:#999999;margin-left: 15px;"></span></a>
                    <a href="#"><span class="fa fa-android" style="font-size:48px;color:#999999;margin-left: 30px;"></span></a>
                    <a href="#"><span class="fa fa-apple" style="font-size:48px;color:#999999;margin-left: 30px;"></span></a>
                </p>
                <p style="line-height: 20px;color:#999999;">
                    <span style="font-size: 15px;">Windows版</span>
                    <span style="font-size: 15px;">Android版</span>
                    <span style="font-size: 15px;margin-left: 15px;">ios版</span>
                </p>
            </div>
            <div class="col-lg-5" style="line-height: 40px;font-size: 15px;padding: 20px;">
                <p style="color: #999999;">联系我们</p>
                <p>
                    <span style="margin: 20px;"><img src="${pageContext.request.contextPath}/img/Y.jpg" width="100px"></span>
                    <span style="margin: 20px;"><img src="${pageContext.request.contextPath}/img/COCO.png" width="100px"></span>
                    <span style="margin: 20px;"><img src="${pageContext.request.contextPath}/img/吴春耀.jpg" width="100px"></span>
                </p>
            </div>
        </div>
    </div>

    <p style="line-height:50px ;">&nbsp;</p>
    <div style="text-align: center;color: #999999;">
        <p>关于音律 | About MySoul | 服务条款 | 用户服务协议 | 隐私政策 | 权利声明 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航</p>
        <p>Copyright © 1998 - 2019 Tencent. All Rights Reserved.</p>
        <p>MySoul公司 版权所有 MySoul网络文化经营许可证</p>
    </div>
</div>
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            layer.msg(elem.text());
        });
    });
</script>
</body>
</html>
